<template>
  <div>
    <template v-if="isComplete">
      <el-popover :width="300" trigger="hover" :placement="placement">
        <template v-if="dataList.length > 0">
          <ul class="ul-list" :style="`height: ${height}px;`">
            <li v-for="(item, index) in dataList" :key="index">
              <div>
                <slot name="showText" :data="item">
                  <span class="prefix_wrap">{{ item.attributeName }}</span>
                  <p v-if="item.attributeValueName">{{ item.attributeValueName }}</p>
                </slot>
              </div>
            </li>
          </ul>
        </template>
        <template v-else>
          <el-empty description="暂无数据" />
        </template>
        <div slot="reference">
          <PerfectLink
            :complete-status="completeStatus"
            :disabled="showTotal"
            @click="handleHasPerfect"
          />
          <span v-if="showTotal" class="total-wrap">
            {{ `(${dataList.length})` }}
          </span>
        </div>
      </el-popover>
    </template>
    <template v-else>
      <PerfectLink
        :complete-status="completeStatus"
        @click="handleNoPerfect"
      />
    </template>
  </div>
</template>
<script>
import PerfectLink from '../PerfectLink';
import { getAttributeValueList } from '../../latentProduct/utils';
export default {
  components: {
    PerfectLink
  },
  props: {
    attributeVos: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 200
    },
    placement: {
      type: String
    },
    showTotal: {
      type: Boolean,
      default: false
    },
    completeStatus: {
      type: String | Number,
      default: ''
    }
  },
  computed: {
    isComplete () {
      const state = (this.attributeVos ?? []).length > 0
      return state
    },
    dataList () {
      const attrList = getAttributeValueList(this.attributeVos)
      return attrList
    },
  },
  methods: {
    // 已完善
    handleHasPerfect () {
      this.$emit('has-perfect')
    },
    // 未完善
    handleNoPerfect () {
      this.$emit('perfect')
    },
  }
}
</script>
<style lang="less" scoped>
.ul-list {
  overflow: hidden;
  overflow-y: auto;
  li {
    padding: 5px 0;
    border-bottom: 1px dashed #ccc;
    div {
      display: flex;
      align-items: center;
      .prefix_wrap {
        font-size: 11px;
        font-weight: bold;
        margin-right: 10px;
      }
      p {
        min-width: 50px;
        text-align: center;
        font-size: 10px;
        color: #fff;
        background-color: #729ec7;
        padding: 2px 4px;
        border-radius: 4px;
      }
    }
  }
}
.total-wrap {
  font-size: 12px;
  color: #67C23A;
}
</style>
